<template>
  <div v-show="showFlag" class="myModal" >
    <transition name="modal-slide">
      <div class="content" :style="{ width: `${width}px`, top: `${top}%` }">
        <div class="topBox">
          <div class="leftTitle">
            <span>{{ title }}</span>
          </div>
          <div class="rightClose" @click="cancelModal"><CloseOutlined /></div>
        </div>
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, withDefaults, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    title?: string
    width?: number
    top?: number
  }>(),
  {
    title: '',
    width: 500,
    top: 45,
  },
)
const { title, width } = toRefs(props)
// 是否开启弹框
let showFlag = ref(false)

// 开启
const showModal = () => {
  showFlag.value = true
}

// 关闭
const cancelModal = () => {
  showFlag.value = false

  emit('cancelModal')
}

const guanBiModal = () => {
  showFlag.value = false
}

const emit = defineEmits(['guanBiModal', 'cancelModal'])

defineExpose({
  showModal,
  cancelModal,
  guanBiModal
})
</script>

<style lang="less" scoped>
.myModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  

  .content {
    animation: slideInFromRightBottom 0.4s;
    background: #ffffff;
    // margin-bottom: 10%;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 4px 13px #00000026;

    .topBox {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 20px;
      margin-bottom: 20px;
      cursor: pointer;

      .leftTitle {
        flex: 1;
        text-align: left;
        color: #15181d;
        font-weight: 500;
        font-size: 15px;
      }

      .rightClose {
        flex: 1;
        text-align: right;
      }
    }
  }
}

@keyframes slideInFromRightBottom {
  0% {
    transform: translate(0, -100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}


</style>
